<template>

    <div>
        <div style="height: 30px; line-height: 30px;padding-left: 20px;">
              <h1>客群详情</h1>
        </div>   
        <div>
            <ui-row type="flex" class="row-bg" justify="space-around">
                    <ui-col :span="4">
                       <span>群组名称</span>
                       <span>群组名称</span>
                    </ui-col>
                    <ui-col :span="4">
                        <span>群组人数:</span>
                       <span>400</span>
                    </ui-col>
                    <ui-col :span="4">
                        <span>动态变化人数</span>
                       <span>123</span>
                    </ui-col>
                    <ui-col :span="4">
                        <span>客群来源</span>
                       <span>规则</span>
                    </ui-col>
            </ui-row>
            <ui-row type="flex" class="row-bg" justify="space-around">
                    <ui-col :span="4">
                       <span>客户类型</span>
                       <span>群组名称</span>
                    </ui-col>
                    <ui-col :span="4">
                        <span>授权类型:</span>
                       <span>共享</span>
                    </ui-col>
                    <ui-col :span="4">
                        <span>创建者</span>
                       <span>123</span>
                    </ui-col>
                    <ui-col :span="4">
                        <span>创建时间</span>
                       <span>规则</span>
                    </ui-col>
            </ui-row>
            <ui-row type="flex" class="row-bg" justify="space-around">
                    <ui-col :span="4">
                       <span>创建机构</span>
                       <span>回显内容</span>
                    </ui-col>
                    <ui-col :span="4">
                     
                    </ui-col>
                    <ui-col :span="4">
                     
                    </ui-col>
                    <ui-col :span="4">
                       
                    </ui-col>
            </ui-row>
        </div>

        <div>
            <div style="text-align: center;">
                <ui-butto>客户列表</ui-butto>
                <ui-butto>客户洞察</ui-butto>
            </div>

            <div>

                
                <vx-table :tableData="tableData" :isSelect="false" :columns="columns" @multipleSelection="multipleSelection"
                        :buttomGroup="buttomGroup" @openDetails="openDetails" ></vx-table>
                <ui-pagination
                    :total="total"
                    :page-size="pageSize"
                    :current-page="currentPage"
                    :layout="layout"
                    :page-sizes="pageSizeList"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                >
                </ui-pagination>



            </div>


        </div>
    </div>
</template>

<script>
import pagination from '@/common/mixin/pagination.js'; // 混入分页
import vxTable from '@/components/vx-table';
 export default{
    mixins: [pagination],
    components:{
        vxTable,
    },
   data(){
    return{
        columns:[
              {
                prop: 'userName',
                label: '客户号',
                fixed: true,
                },
                {
                prop: 'userName',
                label: '客户名称',
                fixed: true,
                },
                {
                prop: 'userName',
                label: '证件类型',
                fixed: true,
                },
                {
                prop: 'userName',
                label: '证件号码',
                fixed: true,
                },
                {
                prop: 'userName',
                label: '归属机构',
                fixed: true,
                },
                {
                prop: 'userName',
                label: '手机号码',
                fixed: true,
                },
                {
                prop: 'userName',
                label: '客户层级',
                fixed: true,
                },
                {
                prop: 'userName',
                label: '有贷户',
                fixed: true,
                },
                {
                prop: 'userName',
                label: '贷款余额',
                fixed: true,
                },
                {
                prop: 'userName',
                label: '存款余额',
                fixed: true,
                },
                {
                prop: 'userName',
                label: '理财余额',
                fixed: true,
                }          
        ],
        tableData:[],
        buttomGroup:[]
    }
   }
}
</script>